<!-- 次模板主要用于首页列表组件 -->
<script setup lang="tsx">
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
import {TableProps} from "tdesign-vue-next";

const statusNameListMap:any = {
  0: {
    label: '审批通过',
    theme: 'success',
    icon: <CheckCircleFilledIcon />,
  },
  1: {
    label: '审批失败',
    theme: 'danger',
    icon: <CloseCircleFilledIcon />,
  },
  2: {
    label: '审批过期',
    theme: 'warning',
    icon: <ErrorCircleFilledIcon />,
  },
};

const data:TableProps['data']=[]
const total = 5;
for (let i = 0; i < total; i++) {
  data.push({
    index: i + 1,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
  });
}

const tableLayout=ref(false)
const size=ref<TableProps['size']>('medium')
const showHeader=ref(true)
const resizable=ref(false)
const stripe = ref(true);
const columns = ref<TableProps['columns']>([
  {
    colKey: 'applicant',
    title: '申请人',
    width: '100',
  },
  {
    colKey: 'status',
    title: '申请状态',
    cell: (h, { row }) => {
      return (
          <t-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">
            {statusNameListMap[row.status].icon}
            {statusNameListMap[row.status].label}
          </t-tag>
      );
    },
  },
  {
    colKey: 'channel',
    title: '签署方式',
  },
  {
    colKey: 'detail.email',
    title: '邮箱地址',
    ellipsis: true,
  },
  {
    colKey: 'createTime',
    title: '申请时间',
  },
]);

</script>

<template>
  <t-space direction="vertical">
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table row-key="index"
             :data="data" :columns="columns"
             :table-layout="tableLayout?'auto':'fixed'"
             :size="size"
             :stripe="stripe"
             :resizable="resizable"
             :show-header="showHeader"
             cell-empty-content="-"
             lazy-load
    ></t-table>
  </t-space>
</template>

<style scoped lang="scss">

</style>